<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'

// 定义 props
const props = defineProps({
    topicName: {
        type: String,
        default: ''
    },
    topicSize: {
        type: Number,
        default: 0
    }
})


// 定义 emits
// const emit = defineEmits(['update:count'])

const topicSize = ref(props.topicSize)

// 响应式数据
const title = ref(props.topicName)
// const message = computed(() => {
//     return `当前计数是: ${count.value}`
// })

// function increment() {
//     count.value++
//     emit('update:count', count.value)
// }

// // 生命周期钩子
// onMounted(() => {
//     console.log('组件已挂载')
// })


</script>

<template>
    <div class="topic-card">
        <div class="topic-container">
            <span class="topic">{{ title }}</span>
            <span class="count">{{ topicSize }}</span>
        </div>
        <div class="buttons-container">
            <el-button type="success">查看队列</el-button>
        </div>
    </div>
</template>

<style scoped>
.topic-card {
    border: 1px solid #165dac;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between; /* 水平方向上两端对齐 */
    align-items: center; /* 垂直居中 */
    height: 80px;
    background-color: #b777ff; /* 添加背景色 */
}

.topic-container {
    display: flex;
    align-items: center;
}

.topic {
    font-size: 24px; /* 加大字号 */
    margin-right: 10px; /* 间距 */
}

.count {
    font-size: 18px; /* 适当增大字号 */
}

.buttons-container {
    display: flex;
    gap: 10px; /* 按钮之间的间距 */
}

button {
    font-size: 16px; /* 按钮字体大小 */
}
</style>